<template >
      <!-- 园区概况 -->
      <div class="content">
        <ul class="over_view_list">
          <li>
            <i  class="icon_mark" />
            <div class="park_data">
              <p>园区总面积</p>
              <div class="number_data">
                <span>30000</span>
                <b>㎡</b>
              </div>
            </div>
          </li>
          <li>
            <i  class="icon_mark" />
            <div class="park_data">
              <p>楼栋总数</p>
              <div class="number_data">
                <span>4</span>
                <b>栋</b>
              </div>
            </div>
          </li>
        </ul>

        <ul class="tenant_list">
          <li>
            <i class="border_onr"></i>
            <div class="text_tenant">
              <p>已租</p>
              <ul class="text_list">
                <li>
                  <b class="color_text_one">2024</b>
                  <span>户</span>
                </li>
                <li>
                  <b class="color_text_one">202400</b>
                  <span>㎡</span>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <i class="border_two"></i>
            <div class="text_tenant">
              <p>未租</p>
              <ul class="text_list">
                <li>
                  <b class="color_text_two">824</b>
                  <span>户</span>
                </li>
                <li>
                  <b class="color_text_two">83400</b>
                  <span>㎡</span>
                </li>
              </ul>
            </div>
          </li>
          <li >
            <chart-view :chart-option="chartPie" :auto-resize="true" height="100%"></chart-view>
          </li>
        </ul>

      </div>
</template>

<script>
export default {
    data() {
       return {
        chartPie:{}
      } 
    },
     created(){
      this.chartPie = this.$eChartFn.data11()
     },
    activated() {
    },
}
</script>




<style scoped lang="less">
@import '../../../../assets/css/chuShiHua.less';
@img:'/static/img/park/home/';
  // .main{
  //   width: calc((100% - 2vw) * 0.24);
  //   height: calc(((92% - 2vh)  * 0.95 * 0.3) - 4vh );
  //   background: #050505;
  //   margin: 50px;
  // }
  .content{
    .WH();
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  .over_view_list{
    .WH(100%,40%);
    display: flex;
    li{
      .WH(50%);
      display: flex;
      align-items: center;
      justify-content: space-around;
      .icon_mark{
        .WH(30%,60%);
        display: block;
        background: 50% 70% no-repeat url(/static/img/park/home//1-1.webp);
        background-size: 80%;
      }
      .park_data{
        .WH(65%,70%);
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        p{
          .WH(90%,30%);
          font-size: 14px;
          font-weight: 400;
          color: #E4F3FF;
          line-height: 8px;
        }
        .number_data{
          .WH(100%,70%);
          display: flex;
          align-items: baseline;
          justify-content: center;
          .backgroundImg('@{img}/bg.webp');
          span{
            width: 40%;
            display: flex;
            justify-content: center;
            font-size: 22px;
            font-weight: 300;
            color: #D9F1FD;
            line-height: 28px;
          }
          b{
            font-size: 14px;
            font-weight: 400;
            color: #E4F3FF;
            line-height: 16px;
          }
        }
      }
    }
  }
  .over_view_list li:nth-child(2) i {
    background-image: url('@{img}/1-2.webp');
  }

  .tenant_list{
    .WH(90%,50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: url('@{img}/bg-1.webp') 0% 50% no-repeat;
    background-size: 85%;
    >li{
      .WH(30%,100%);
      display: flex;
      align-items: center;
      justify-content: space-between;
      i{
        .WH(5%,50%);
        display: block;

      }
      .text_tenant{
        .WH(80%,80%);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        p{
            font-size: 14px;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 16px;
          }
        .text_list{
          .WH(100%,70%);
          >li{
            .WH(100%,50%);  
            display: flex;
            align-items: baseline;
            b{
              .WH(75%);
              display: block;
              font-size: 16px;
              font-weight: 400;
            }
            span{
              font-size: 14px;
              font-weight: 400;
              color: rgba(176,224,255,0.6);
              line-height: 16px;
            }
          }

        }
      }
    }
  }
  .border_onr{
    border-right: 1px solid #27A6FF;
  }
  .border_two{
    border-right: 1px solid #B0E0FF;
  }              
  .color_text_one{
    color: #27A6FF;
  }
  .color_text_two{
    color: #B0E0FF;
  }
</style>